﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - SpreadJS Libraries</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - SpreadJS Libraries"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n20","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="You can load SpreadJS sub-libraries to use certain features without loading all the libraries." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="bcfbd46c-d065-456b-8843-8a2b32037d58"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="881e1673-63c9-40dd-b583-5bb1d4d3ce08"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="12"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="getstarted.html">Get Started</a>
 / SpreadJS Libraries</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->SpreadJS Libraries<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>You can load SpreadJS sub-libraries to use certain features without loading all the libraries.</p>

<table class="Basic" style="WIDTH: 100%">
    <tbody>
        <tr>
            <td><strong>Features</strong></td>

            <td><strong>Required Libraries</strong></td>
        </tr>

        <tr>
            <td>Core</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Calc Engine</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Basic Functions</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.calcengine.basicfunctions.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Advanced Functions</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.calcengine.advancedfunctions.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Data Binding</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.bindings.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Drag Fill</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.fill.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Filter</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.conditionalformatting.*.*.*.min.js<br />
            gc.spread.sheets.filter.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Formula Textbox</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.formulatextbox.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Floating Object</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.floatingobjects.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Outline</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.outlines.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Touch</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.touch.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Print</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.print.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Cell Type</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.celltypes.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Comment</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.comments.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Conditional Formatting</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.conditionalformatting.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Data Validation</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.conditionalformatting.*.*.*.min.js<br />
            gc.spread.sheets.datavalidation.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Search</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.search.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Sparkline</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.calcengine.basicfunctions.*.*.*.min.js<br />
            gc.spread.calcengine.advancedfunctions.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.sparklines.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Table</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js (optional, for&nbsp;formulas and filters)<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.bindings.*.*.*.min.js (optional, for&nbsp;data-binding)<br />
            gc.spread.sheets.conditionalformatting.*.*.*.min.js (optional, for&nbsp;filtering)<br />
            gc.spread.sheets.filter.*.*.*.min.js (optional, for&nbsp;filtering)<br />
            gc.spread.sheets.tables.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Chart</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.bindings.*.*.*.min.js (for&nbsp;data-binding)<br />
            gc.spread.sheets.charts.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Drag Merge</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.dragmerge.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Outline Column</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.outlinecolumn.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Context Menu</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.contextmenu.*.*.*.min.js<br />
            gc.spread.sheets.bindings.*.*.*.min.js (for data-binding)</td>
        </tr>

        <tr>
            <td>PDF</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.pdf.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Slicer Component</td>

            <td>gc.spread.common.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Slicer</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.conditionalformatting.*.*.*.min.js<br />
            gc.spread.sheets.filter.*.*.*.min.js<br />
            gc.spread.sheets.tables.*.*.*.min.js<br />
            gc.spread.sheets.floatingobjects.*.*.*.min.js<br />
            gc.spread.sheets.slicers.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Barcode</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.sparklines.*.*.*.min.js<br />
            gc.spread.sheets.barcode.*.*.*.min.js</td>
        </tr>

        <tr>
            <td>Shapes</td>

            <td>gc.spread.common.*.*.*.min.js<br />
            gc.spread.calcengine.*.*.*.min.js<br />
            gc.spread.sheets.core.*.*.*.min.js<br />
            gc.spread.sheets.floatingobjects.*.*.*.min.js<br />
            gc.spread.sheets.shapes.*.*.*.min.js</td>
        </tr>
    </tbody>
</table>

<p>The core js must always be loaded. The calcengine js must be loaded first in order to use functions. Many features use the calcengine js so you may wish to load it first. If you use a function from a js file that has not been loaded, the function does not take effect.</p>

<p>The js files are located in the pluggable folder under the main SpreadJS scripts folder.</p>

<h4>Using Code</h4>

<p>This example uses basic&nbsp;SpreadJS functions.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // The Spread definition and most UI behavior is in the SpreadJS core library.<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sheet.setValue(0, 0, 20);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<h4>Using Code</h4>

<p>This example uses basic&nbsp;calc functions.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable calcengine function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable calcengine basic function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sheet.setArray(0, 0, [1, 2, 3, 4, 5]);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sheet.setFormula(5, 1, 'SUM(A1,A5)');<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<h4>Using Code</h4>

<p>This example uses calc and advanced functions.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable calcengine function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable calcengine advanced function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var activeSheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setValue(0, 0, 1);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setValue(1, 0, 10);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setValue(2, 0, 7);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setValue(3, 0, 9);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setValue(4, 0, "a1");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setFormula(5, 0, "MAX(A1:A5)");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<h4>Using Code</h4>

<p>This example uses binding functions.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable data binding library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var activeSheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var people = [<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { name: "Albert", isAdult: false, country: "American", website: "albert.com" },<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { name: "Alice", isAdult: true, country: "China", website: "alice.com" },<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { name: "Bob", isAdult: false, country: "Canada", website: "bob.com" }<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ];<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.autoGenerateColumns = true;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.setDataSource(people);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<h4>Using Code</h4>

<p>This example uses the formula text box.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable calcengine function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable formula text box function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // The formula text box function is in the Spread formula tex box library.&nbsp;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sheet.setArray(0, 0, [1, 2, 3, 4, 5]);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fbx.workbook(spread);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;input type="text" id="formulaTextBox" /&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<h4>Using Code</h4>

<p>This example uses the comment functions.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable comment library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var activeSheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var comment = new GC.Spread.Sheets.Comments.Comment();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; comment.text("new comment!");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; comment.backColor("yellow");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; comment.foreColor("green");<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; comment.displayMode(GC.Spread.Sheets.Comments.DisplayMode.alwaysShown);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.getCell(5,5).comment(comment);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;input type="text" id="formulaTextBox" /&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div>

<h4>Using Code</h4>

<p>This example uses the FloatObject functions.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">&lt;!DOCTYPE html&gt;<br />
                &lt;html&gt;<br />
                &lt;head&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;title&gt;SpreadJS Pluggable Sample&lt;/title&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="./css/gc.spread.sheets.12.0.0.css" rel="stylesheet"/&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable common function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.common.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;!--SpreadJS pluggable core function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp; &lt;!--SpreadJS pluggable floating objects function library--&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.12.0.0.min.js"&gt;&lt;/script&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;script&gt;<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var activeSheet = spread.getActiveSheet();<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 100, 100, 60, 64);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var btn = document.createElement('button');<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; btn.style.width = "60px";<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; btn.style.height = "30px";<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; btn.innerText = "button";<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; customFloatingObject.content(btn);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; activeSheet.floatingObjects.add(customFloatingObject);<br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />
                &nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />
                &lt;/head&gt;<br />
                &lt;body&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;div id="ss" style="width:800px; height:600px; border: 1px solid gray;"&gt;&lt;/div&gt;<br />
                &nbsp;&nbsp;&nbsp; &lt;input type="text" id="formulaTextBox" /&gt;<br />
                &lt;/body&gt;<br />
                &lt;/html&gt;</td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
